<template>
  <div class="hold-transition skin-purple sidebar-mini">
    <el-container>
      <el-header class="main-header" style="height:70px;">
        <nav class="navbar navbar-static-top">
          <!-- Logo -->
          <a href="#" class="logo" style="text-align:center">
            <span class="logo-lg">
              <img src="../assets/img/logo.png" />
            </span>
          </a>
          <div class="right-menu">
            <span class="help">
              <i class="fa fa-exclamation-circle" aria-hidden="true">帮助</i>
            </span>
            <el-dropdown class="avatar-container right-menu-item" trigger="click">
              <div class="avatar-wrapper">
                <img src="../assets/img/user2-160x160.jpg" class="user-avatar" />
                {{this.$store.state.userInfo.username}}
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item divided>
                  <span style="display: block" @click="updateUsername()"
                  >修改密码</span
                  >
                </el-dropdown-item>
                <el-dropdown-item divided>
                  <span style="display:block;">
                    <a @click="logout" href="javascript:void(0);">退出</a>
                  </span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </nav>
      </el-header>
      <el-aside width="200px">
        <el-menu>
          <el-submenu v-for="menu in menuList" :index="menu.path" :key="menu.path">
            <template slot="title">
              <i class="fa" :class="menu.icon"></i>
              {{menu.title}}
            </template>
            <template v-for="child in menu.children">
              <el-menu-item :index="child.path" :key="child.path">
                <a @click="goMenu(child.linkUrl)" href="javascript:void(0);">{{child.title}}</a>
              </el-menu-item>
            </template>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view/>
        <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
          <el-form
            :model="formData"
            :rules="rules"
            label-position="right"
            label-width="100px"
          >
            <el-col :span="12">
              <el-form-item label="帐号" prop="userName">
                <el-input
                  v-model="formData.userName"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>


            <el-col :span="12">
              <el-form-item label="密码" prop="pwd">
                <el-input
                  type="password"
                  v-model="formData.pwd"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="确认密码" prop="checkpwd">
                <el-input
                  type="password"
                  v-model="formData.checkpwd"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSave()">确 定</el-button>
          </div>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>
<script>
// import mList from "./menu.json";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.formData.checkpwd !== "") {
          this.$refs.formData.validateField("checkpwd");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.formData.pwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      menuList: [],
      dialogFormVisible: false,
      formData: {},
      rules: {
        //校验规则
        pwd: [{ validator: validatePass, trigger: "blur" }],
        checkpwd: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  methods: {
    goMenu: function(_name) {
      if (_name != this.$router.currentRoute.name)
        this.$router.replace({ name: _name });
      else if (!_name) this.$message.warning("暂未开通该功能");
    },
    logout: function() {
      //跳转到登入页
      this.$router.push({ path: "/" });
    },
    selectUserMenus(){
      // alert(this.$store.state.userInfo.username)
      this.$http.get('api/menu/getMenus/'+this.$store.state.userInfo.username).then(res=>{
        if(res.data.flag){
          console.log(res.data);
          this.menuList = res.data.data;
        }

      })
    },
    updateUsername(){
      this.dialogFormVisible = true,
        this.formData.userName=this.$store.state.userInfo.username
    },

    handleSave() {
      this.$http.post("api/user/updatePW", this.formData).then((res) => {
        this.dialogFormVisible = false;
        this.logout();
      });
    },
  },
  created() {
    this.selectUserMenus()
    // this.menuList = mList;
  }
};
</script>
<style lang="scss">
@import "../assets/css/style.css";
</style>
<style type="text/css" scoped>
.el-main {
  position: absolute;
  top: 70px;
  bottom: 0px;
  left: 200px;
  right: 10px;
  padding: 0;
}
</style>
